import { getChatByAiAsyncUsingPost } from '@/services/zengjin/chartController';
import { history } from '@@/core/history';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Card, Form, Input, Select, Space, Upload, message } from 'antd';
import { createStyles } from 'antd-style';
import React from 'react';
const { Option } = Select;
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

createStyles(({ token }) => {
  return {
    action: {
      marginLeft: '8px',
      color: 'rgba(0, 0, 0, 0.2)',
      fontSize: '24px',
      verticalAlign: 'middle',
      cursor: 'pointer',
      transition: 'color 0.3s',
      '&:hover': {
        color: token.colorPrimaryActive,
      },
    },
    lang: {
      width: 42,
      height: 42,
      lineHeight: '42px',
      position: 'fixed',
      right: 16,
      borderRadius: token.borderRadius,
      ':hover': {
        backgroundColor: token.colorBgTextHover,
      },
    },
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
      backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
      backgroundSize: '100% 100%',
    },
  };
});
const AddChart: React.FC = () => {
  // const [chart, setChart] = useState<API.BiResponse>();
  // const [option, setOption] = useState<any>();
  // const [submitting, setSubminting] = useState<boolean>(false);
  const onFinish = async (values: any) => {
    console.log('Received values of form: ', values);
    const params = {
      ...values,
      upload: undefined,
    };
    //提交的时候将上次的，清空。
    // setSubminting(true);
    // setChart(undefined);
    // setOption(undefined);

    try {
      const res = await getChatByAiAsyncUsingPost(params, {}, values.upload.file.originFileObj);
      if (!res?.data) {
        message.error('分析失败!  ' + res.message);
      } else {
        message.success('分析成功！');
        history.push('/myChart');
        // const chartOption = JSON.parse(res.data.getChart ?? '');
        // if (!chartOption) {
        //   throw new Error('图表代码解析错误');
        // } else {
        //   setChart(res.data);
        //   setOption(chartOption);
        // }
      }
    } catch (e: any) {
      message.error('分析异常' + e.message);
    }
    // setSubminting(false);
  };
  return (
    <div>
      {/*<Card title="分析结论">*/}
      {/*  <div>*/}
      {/*    <Spin spinning={submitting} />*/}
      {/*    {chart?.genResult}*/}
      {/*  </div>*/}
      {/*</Card>*/}
      {/*<Card title="生成图表">*/}
      {/*  <div>*/}
      {/*    <Spin spinning={submitting} />*/}
      {/*    {option && <ReactECharts option={option} />}*/}
      {/*  </div>*/}
      {/*</Card>*/}
      <Card title="提交数据">
        <Form
          name="validate_other"
          {...formItemLayout}
          onFinish={onFinish}
          initialValues={{
            chartType: '合适的',
          }}
          style={{ maxWidth: 600 }}
        >
          <Form.Item
            name="name"
            label="图表名称"
            rules={[{ required: true, message: '给你的图表取一个名字吧' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="chartType"
            label="图表类型"
            hasFeedback
            rules={[{ required: true, message: '请选择你要分析的图表类型!' }]}
          >
            <Select placeholder="请选择你要分析的图表类型!">
              <Option value="合适的">合适的</Option>
              <Option value="折线图">折线图</Option>
              <Option value="柱状图">柱状图</Option>
              <Option value="饼图">饼图</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="goal"
            label="分析目标"
            rules={[{ required: true, message: '请输入你要分析的目标!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="upload"
            label="文件上传"
            // valuePropName="fileList"
            // getValueFromEvent={normFile}
            extra="注意：该系统目前一次只能分析一份(.xlsx)的文件类型！"
            rules={[{ required: true, message: '请选择你要分析的文件!' }]}
          >
            <Upload name="logo" action="/upload.do" listType="picture">
              <Button icon={<UploadOutlined />}>选择上传的文件</Button>
            </Upload>
          </Form.Item>

          <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
              <Button htmlType="reset">重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
export default AddChart;
